<template>
  <div style="padding: 10px">
    <div style="width: 100%">
      <el-button type="primary" @click="xianshi" icon="el-icon-edit"
        >添加</el-button
      >
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="id" width="200"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="200"> </el-table-column>
      <el-table-column prop="cost" label="职位" width="200"> </el-table-column>
      <el-table-column prop="introduce" label="医生评价" width="200">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- Form -->
    <el-dialog title="添加项目" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-input placeholder="请输入项目名称" v-model="form.name" clearable>
          <template slot="prepend">项目名称</template>
        </el-input>
        <div style="margin: 20px 0"></div>

        <el-input-number v-model="form.cost" label="描述文字">
        </el-input-number>
        <div style="margin: 20px 0"></div>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="form.introduce"
        >
        </el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addkai">确 定</el-button>
      </div>
    </el-dialog>

    <!-- upform -->
    <el-dialog title="添加项目" :visible.sync="yudialogFormVisible">
      <el-form :model="yuform">
        <el-input placeholder="请输入项目名称" v-model="yuform.name" clearable>
          <template slot="prepend">项目名称</template>
        </el-input>
        <div style="margin: 20px 0"></div>

        <el-input-number v-model="yuform.cost" label="描述文字">
        </el-input-number>
        <div style="margin: 20px 0"></div>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="yuform.introduce"
        >
        </el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="yudialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="yuupdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  addProject,
  updateProject,
} from "../../../../api/Projecttable";

export default {
  data() {
    return {
      tableData: [],
      form: {
        id: "",
        name: "",
        cost: "",
        introduce: "",
      },
      yudialogFormVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "180xp",
      yuform: {
        id: "",
        name: "",
        cost: "",
        introduce: "",
      },
    };
  },
  mounted() {
    this.Lodwn();
  },
  methods: {
    yuupdate() {
      this.yudialogFormVisible = false;
      updateProject(this.yuform).then((res) => {
        if (res.success) {
          this.Lodwn();
          this.yuform = {};
          this.$message({
            message: "修改成功",
            type: "success",
          });
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    addkai() {
      this.dialogFormVisible = false;
      addProject(this.form).then((res) => {
        if (res.success) {
          this.Lodwn();
          this.form = {};
          this.$message({
            message: "添加成功",
            type: "success",
          });
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    Lodwn() {
      getList().then((res) => {
        if (res.success) {
          this.tableData = res.result;
        }
      });
    },
    xianshi() {
      this.dialogFormVisible = true;
    },
    handleEdit(index, row) {
      this.yudialogFormVisible = true;
      this.yuform = row;
    },
  },
};
</script>
